/**
 * #info
 *
 *@author   zhengshundong
 *@createTime   2018/03/20
 *@updateTime   2019/11/20
 *@description  card  component 卡片组件
 */

/**
 * #item
 *
 * @type        aty-card
 * @cn          卡片
 * @menu        数据
 * @stPlugin    true
 * @stContainer true
 * @description 卡片组件，可以增加title子控件
 */
// 扩展属性
/**
 * #extendproperty
 *
 * @name    slot
 * @cn      slot插槽
 * @options [default,header]
 * @type    list
 * @description  [default, header], default插槽，用于默认插入card-body, header插槽，用于默认插入card-header
 */
import config from '../../../config/config.js'

// prefix
const prefixCls = config.prefix + '-card'
// module
const module = {
  name: prefixCls,
  components: {},
  props: {
    /**
     * #property
     *
     * @name    width
     * @cn      卡片容器的宽
     * @type    string,number
     * @value    200px
     * @description  卡片容器的宽
     */
    width: {
      type: [String, Number],
      default: '200px'
    },
    /**
     * #property
     *
     * @name    height
     * @cn      卡片容器的高
     * @type    string,number
     * @value    300px
     * @description  卡片容器的高
     */
    height: {
      type: [String, Number],
      default: '300px'
    },
    /**
     * #property
     *
     * @name    bordered
     * @cn      是否显示边框
     * @type    boolean
     * @bind    must
     * @value   true
     * @description 是否显示边框，建议在灰色背景下使用
     */
    bordered: {
      type: Boolean,
      default: true
    },
    /**
     * #property
     *
     * @name    shadow
     * @cn      设置阴影显示时机
     * @type    list
     * @options   [always, hover, never]
     * @value   hover
     * @description 设置阴影显示时机，默认hover [always, hover, never]
     */
    shadow: {
      validator(value) {
        return Artery.isOneOf(value, ['always', 'hover', 'never'])
      },
      default: 'hover'
    }
  },
  data() {
    return {
      currentPaddingTop: 'auto',
      parent: null
    };
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-bordered`]: this.bordered,
          [`${prefixCls}-dis-hover`]: this.shadow === 'never',
          [`${prefixCls}-shadow`]: this.shadow === 'always'
        }
      ]
    },
    currentStyle() {
      return {
        width: Artery.type(this.width) !== 'number' ? this.width : this.width + 'px',
        height: Artery.type(this.height) !== 'number' ? this.height : this.height + 'px',
        'padding-top': this.currentPaddingTop
      }
    }
  },
  methods: {
    setParentStyle() {
      if (this.$slots.header) {
        let _height = Artery.getStyle(this.$refs.header, 'height');
        this.currentPaddingTop = _height
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.setParentStyle()
    }, 300)
  }
}
export default module
